p   /*规定网页中所有行文字体的样式*/
{
    font-size: smaller;
    font-weight: lighter;
    color:#97989A;
    font-family: TahomMonospace;
    font-style: italic;
}

/*====================页头部分的类==============*/
.header /*页头样式*/
{
    margin:5px; 
    /*flex布局*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;   
}
.header a/*导航栏链接 字体样式*/
{
    font-size:10px;
    font-weight:bold;
}
.logo   /*左边logo字体和图片对齐*/
{
    display:flex;
    flex-direction: row;
    align-items:center;
}
.navigation a  /*导航栏外边距调整*/
{
    margin:10px;
}
.navigation a:link , a:visited  /*鼠标点击导航栏样式*/
{ 
    color: black;
    text-decoration: none;
}
.navigation a:hover
{
    color:#D49C63;
}

/*====================中间标题的类==================*/
.title
{
    /*背景图片样式*/
    background-image: url(./image/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:420px 150px;

    height:160px;
    line-height: 2px;
    margin:10px;

    /*flex布局*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
}

/*====================图画廊的类========================*/
.gallery/*图画廊样式*/
{ 
    margin:10px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;/*图片换行样式*/
    justify-content: center;
}

.image/*单个图片和菜名的样式*/
{
    width:350px;
    height:450px;
    border: 1px solid #ccc;/*边框效果*/
    padding: 1px;
    margin:5px;

    /*flex布局 图片和菜名对齐*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.image img/*图片大小样式*/
{
    width:350px;
    height:300px;
}

div.image:hover/*鼠标悬浮效果*/
{
    border: 1px solid  #777;
}

/*=========================页脚的类================*/
.footer-logo/*页脚图标*/
{
    margin-top:100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
}

.footer-logo img
{
    height:50px;
    width:50px;
    padding: 15px;
    border: 1px solid  #777;
    border-radius: 50%/*圆形边框*/

}

/*logo前后用平铺背景形成线*/
.footer-logo::before,.footer-logo::after
{
    content: '';
    flex: 1;
    height: 1px;
    background: #ccc
}

.footer-logo::before{
    margin-right: 10px;
}
.footer-logo::after{
    margin-left: 10px;
}

.footer/*页脚样式*/
{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}

.other-logo
{
    width:110px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*只显示图标上边框*/
    border-top: 1px solid #ccc;
    padding: 20px;
}

